<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>北京自考社区网站-注册</title>
  <link href="/layui/css/layui.css" rel="stylesheet">

  <style>
    .my-register-bg {
      margin-top: 100px;
    }

    .my-register {
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 40px;
      height: 600px;
      border: 1px solid #f0f0f0;
    }

    .my-register h3 {
      text-align: center;
      margin-top: 60px;
      margin-bottom: 20px;
    }

    /* 自定义表单相关样式 */
    .my-form {
      margin-top: 60px;
    }

    .my-form-item {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .my-form-input {
      width: 100%;
      height: 12px;
      border: #cccccc solid 1px;
      padding: 16px;
      /* 避免input超出父div */
      box-sizing: border-box;
    }

    .my-form-btn {
      background: #00b7d3;
      width: 100%;
      height: 46px;
      border: none;
      color: white;
    }
    .tips{
      color: red;
    }
  </style>
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8 my-register-bg">
        <img src="images/regist-bg.png" />
      </div>

      <div class="layui-col-md4 my-register">
        <h3>注册北京自考社区</h3>

        <form id="myFrom" class="my-form">
          <div class="my-form-item">
            <span class="tips" id="name-tips"></span>
            <input id="name" class="my-form-input" type="text" placeholder="请设置用户昵称" />
          </div>
          <div class="my-form-item">
            <input id="email" type="text" class="my-form-input" placeholder="请输入邮箱" />
          </div>
          <div class="my-form-item">
            <input id="pwd" type="password" class="my-form-input" placeholder="设置6至20位登录密码" />
          </div>
          <div class="my-form-item">
            <input id="confirmPwd" type="password" class="my-form-input" placeholder="请再次输入密码" />
          </div>
          <div class="my-form-item">
            <input id="agree" type="checkbox" name="agree" value=""/> 我已阅读并同意 <a href="#">《用户协议和隐私条款》</a>
          </div>
          <div class="my-form-item">
            <button class="my-form-btn" id="submit" type="button">同意并注册</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script>
  layui.use('layer', function () {
    var layer = layui.layer;

    // 检查用户名是否重复
    $(document).on('change',"#name",function () {
        var name = $("#name").val();
        if (name == ''){
          return;
        }
      $.ajax({
        url: '/user/user/checkName?name='+name,
        type: 'get',
        contentType: "application/json;charset=UTF-8",
        success: function (obj) {
          console.log("obj:",obj);
          if (obj.code != 200){
            $("#name-tips").text(obj.msg);
          }else{
            $("#name-tips").text("");
          }
        }
      });
    });
    // 检查邮箱是否已注册
    $(document).on('change',"#email",function () {
      var email = $("#email").val();
      if (email == ''){
        return;
      }
      $.ajax({
        url: '/user/user/checkEmail?email='+email,
        type: 'get',
        contentType: "application/json;charset=UTF-8",
        success: function (obj) {
          console.log("obj:",obj);
          if (obj.code != 200){
            $("#name-tips").text(obj.msg);
          }else{
            $("#name-tips").text("");
          }
        }
      });
    });
    // 注册
    $(document).on('click','#submit',function(){
        if (!$("#agree").is(":checked")){
          layer.open({
            type: 0,
            content: "请同意用户协议"
          });
          return;
        }

        // 一、获取表单数据
        var name = $("#name").val();
        var email = $("#email").val();
        var pwd = $("#pwd").val();
        var confirmPwd = $("#confirmPwd").val();

      // 校验表单数据
      if (name == ''){
        layer.open({
          type: 0,
          content: "用户昵称不能为空，请输入用户昵称"
        });
        return;
      }
      if ($("#name-tips").val() != ''){
        layer.open({
          type: 0,
          content: "用户名已被占用"
        });
        return;
      }
      if (email == ''){
        layer.open({
          type: 0,
          content: "用户邮箱不能为空，请输入用户邮箱"
        });
        return;
      }
      var checkEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!checkEmail.test(email)) {
        layer.open({
          type: 0,
          content: "请输入正确的邮箱"
        });
      }

      if (pwd == ''){
        layer.open({
          type: 0,
          content: "密码不能为空，请输入密码"
        });
        return;
      }
      if (pwd != confirmPwd){
        layer.open({
          type: 0,
          content: "两次密码不一样"
        });
        return;
      }

      // 二、注册
      var registData = {
        "name":name,
        "email":email,
        "pwd":pwd
      }
      $.ajax({
        url: '/user/user/regist',
        type: 'post',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(registData),
        success: function (obj) {
          console.log("obj:",obj);
          if (obj.code == 200){
            layui.use('layer', function () {
              layer.open({
                type: 0,
                content: obj.msg,
                end:function(){
                  window.location.href='/loginPage';
                }
              });
            });
          }else {
            layui.use('layer', function () {
              layer.open({
                type: 0,
                content: "注册失败"
              });
            });
          }
        }
      });
    });
  })
</script>

</html>